<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Conponent</title>
	<script type="text/javascript" src="UIBase.js"></script>
	<style rel="stylesheet">
		.active{
			background-color: yellow;
		}
	</style>
</head>
<body>
	<script>
		class List extends UIBase{
			constructor(num){
				super({num,currentIndex:0}
					);
                
			}

			up(){
				var index=this.props.currentIndex;
				if(index===0){
					index=this.props.num-1;
				}
				else{
				index--;
				}
				this.props.currentIndex=index;
				this.render();
			}


			down(){
                var index=this.props.currentIndex;
                if(index==this.props.num-1){
                	index=0;
                }
                else{
                	index++;
                }
                this.props.currentIndex=index;
                this.render();
			}
			_render(props){
				var lis="";
				//调用这个render（原型链上的方法）,props指向对象本身，super里面会继承props属性
				for(var i=0;i<props.num;i++){
					lis+=`<li class="${props.currentIndex === i?"active":""}">${"aaa-"+i}</li>`
				}
				var html=`
				<ul>
				${lis}
				</ul>
				`;
				// return super.render(html);调用父类上的render()
                return html;
			}
		}	
		   var list=new List(8);//传进一个参数8，List.props=8
		        document.body.appendChild(list.element);
		        document.addEventListener("keydown",function(Event){
		        	if(Event.keyCode == 38){
		        		list.up();
		        	}
		        	if(Event.keyCode == 40){
		        		list.down();
		        	}
		        });

	</script>
</body>
</html>